<script>
  import $ from '../dfish.js'
  import {h} from 'vue'
  import FormBase from './FormBase.vue'

  export default {
    name: 'w-range',
    mixins: [FormBase],
    provide() {
      return {
        provideRangeParent: this
      }
    },
    props: ['compare'],
    methods: {
      getRangeError() {
        let f = this.forms()
        if (f.length > 1) {
          let v1 = f[0] && f[0].formVal()
          let v2 = f[1] && f[1].formVal()
          let c = this.x.compare || '<='
          if (!isNaN(v1)) v1 = parseFloat(v1)
          if (!isNaN(v2)) v2 = parseFloat(v2)
          if (v1 && v2) {
            if (!$.eval(`v1 ${c} v2`, {v1, v2})) {
              return this.formErr({type: 'compare'}, [f[0].getLabelText(), c, f[1].getLabelText()])
            }
          }
        }
      },
      forms() {
        return this.ownerView.fAll(null, this.el('main'))
      },
      snapElem() {
        return this.forms()[0] || this.el('main')
      },
      html_form() {
        let c = this.slots_children()
        c.splice(1, 0, h('div', {class: 'w-range-to'}, $.loc.to))
        //c.push(h('input', {type: 'hidden', ref:'v', id: this.uid + 'hdn'}))
        return c
      },
    },
    computed: {
      html_on() {
        return {
          onclick: e => this.warnClass = ''
        }
      }
    }
  }
</script>

<style>
  .w-range > .w-input > .w-formbase {
    flex-basis: var(--w-input-width);
  }
  .w-range-to {
    width: 28px;
    min-width: 20px;
    text-align: center;
  }
</style>
